<template>
    <div class="container">
        <div @click="open" class="value-p">
            <label v-if="select">{{select.valName}}</label>
            <label class="gray" v-else>请选择</label>
        
        </div>
        <van-popup v-model="visible" round position="bottom">
            <van-picker
                show-toolbar
                :columns="list"
                value-key="valName"
                @cancel="close"
                @confirm="confirm"
            />
        </van-popup>
    </div>
</template>
<script>
import { Popup, Picker  } from 'vant'
import { getDictionariesApi} from '@/api/myNewApi'
export default {
    components: {
        [Popup.name]: Popup, [Picker.name]: Picker
    },
    props: {
        value: String,
        disable: Boolean,
        list: {
            type:Array,
            default: function(){
                return []
            }
        }
    },
    watch: {
        value(newVal, oldVal){
            
            for(let item of this.list) {
              
                if (item.valName == newVal) {
                    this.select = item
                }
            }
        },
        list(newVal, oldVal){
            for(let item of this.list) {
               
                if (item.valName == this.value) {
                    this.select = item
                }
            }
           
        }
    },
    data(){
        return {
            visible: false,
           
            select: ''
        }
    },
    methods: {
        confirm(val){
            this.select = val
            this.close()
            this.$emit('input', this.select.valName)
            this.$emit('change')
        },
        open(){
            if (this.disable) {
                return
            }
            this.visible = true
        },
        close(){
            this.visible = false
        },
       
        async getList(){
           
            this.list = await getDictionariesApi({
                typeCode: 'FamilyRelation'
            })

            // description: null
            // orderNum: 1
            // status: true
            // typeCode: "IdCardType"
            // valCode: "ResidentIdCard"
            // valName: "居民身份证"
            
        }
    },
    mounted(){
      
    }
}
</script>
<style scoped>
.container{
    height: 0.85rem; width: 1rem;
    background: #fff;
    border-radius: 0.1rem;
    font-size: 0.3rem;
    padding: 0 0.2rem;
    margin: 0 0.1rem 0 0;
}
.value-p{
    height: 100%; width: 100%; 
}
.value-p::before{
    content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.gray{
    color: #969696;
}
</style>